<template>
    <div class="container">
        <div class="header">
            <Header></Header>
        </div>
        <div class="content">
            <div class="content-header">
                <div class="crumbs">首页 > 荣誉</div>
                <div class="title">
                    <img src="./images/honor_title-10.png" alt="">
                </div>
            </div>
            <img class="item1" src="./images/honor_item1-10.png" alt="">
            <img class="item2" src="./images/honor_item2-10.png" alt="">
            <img class="item3" src="./images/honor_item3-10.png" alt="">
            <div class="item4">
                <img src="./images/honor_item4-10.png" alt="">
                <img src="./images/honor_item5-10.png" alt="">
            </div>
            <img class="item5" src="./images/honor_item6-10.png" alt="" loading="lazy">
            <img class="item6" src="./images/honor_item7-10.png" alt="" loading="lazy">
            <img class="item8" src="./images/honor_item8-10.png" alt="" loading="lazy">
        </div>
        <div class="footer">
            <Footer></Footer>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '@/components/Header/Header.vue';

export default {
    name: 'honor',
    data() {
        return {
        }
    },
    components: {
        Header, Footer
    },
}
</script>
<style scoped>
.container {
    width: 100%;
}

.content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #BD272D;
}

.content-header {
    width: 100%;
}

.crumbs {
    margin: 3vw;
    margin-left: 10vw;
    font-size: 18px;
    color: #fff;
}

.title {
    width: 100%;
    text-align: center;
}

.title img {
    width: 15vw;
    margin-bottom: 5vw;
}

.item1 {
    width: 50%;
    animation: slideIn 2s forwards;
    opacity: 0;
    animation-delay: 0s;
}

.item2 {
    width: 50%;
    animation: slideOut 2s forwards;
    opacity: 0;
    animation-delay: 0.7s;
}

.item3 {
    width: 65%;
    animation: slideIn 2s forwards;
    animation-delay: 1.4s;
    opacity: 0;
}

.item4 {
    width: 35%;
    animation: slideOut 2s forwards;
    animation-delay: 2s;
    opacity: 0;
}

.item4 img {
    width: 100%;
}

.item5 {
    width: 45%;
    animation: slideIn 2s forwards;
    opacity: 0;
    animation-delay: 2.7s;
}

.item6 {
    width: 55%;
    opacity: 0;
    animation: slideOut 2s forwards;
    animation-delay: 3.4s;
}

.item8 {
    width: 100%;
}

.footer {
    height: 15vw;
}

/* 动画定义 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30vh);
        /* 从下方滑入 */
    }

    to {
        opacity: 1;
        transform: translateY(0);
        /* 最终回到正常位置 */
    }
}

@keyframes slideOut {
    from {
        opacity: 0;
        transform: translateY(-30vh);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 手机/小屏幕 */
@media screen and (max-width: 960px) {
    .crumbs {
        margin: 3vw;
        margin-left: 10vw;
        font-size: 12px;
    }

    .title img {
        width: 40vw;
        margin-bottom: 5vw;
    }

    .footer {
        height: 30vw;
    }
}
</style>